// 首页底部卡片
'use client'

import type { TabsProps } from 'antd'
import React, { useState } from 'react'
import type { DrawerProps, RadioChangeEvent, CascaderProps } from 'antd'
import { Button, Drawer, Radio, Space, Tabs, Cascader, Flex, Switch } from 'antd'
import Styles from '../../page.module.scss'

interface Option {
  value: string | number
  label: string
  children?: Option[]
}

type TrafficDialogProps = {
  isOpenDrawer: boolean
  setIsOpenDrawer: () => void
  // location: [number, number] | null
}

const options: Option[] = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
      },
    ],
  },
]

export default function BottomDrawer({ setIsOpenDrawer, isOpenDrawer }) {
  const [open, setOpen] = useState(false)
  const [disabled, setDisabled] = useState(false)
  const showDrawer = () => {
    setIsOpenDrawer(true)
  }

  const onClose = () => {
    setIsOpenDrawer(false)
  }

  const onChange = () => {}
  const items: TabsProps['items'] = [
    { key: '1', label: '摄像头' },
    { key: '2', label: 'Tab 2' },
    // { key: '3', label: 'Tab 3', children: 'Content of Tab Pane 3' },
  ]

  return (
    <Drawer
      placement={'bottom'}
      closable={false}
      onClose={onClose}
      open={isOpenDrawer}
      key={'bottom'}
      className={`${Styles['bottom-drawer']} text-white`}>
      <Tabs
        defaultActiveKey='1'
        items={items}
        onChange={onChange}
        indicator={{ size: origin => origin - 20, align: 'center' }}
      />

      <Cascader.Panel
        options={options}
        onChange={onChange}
        disabled={disabled}
      />

      <Cascader.Panel />
    </Drawer>
  )
}
